<template>
    <div>
        <sortableJs :tableData="tableData" :dropCol="dropCol"></sortableJs>
        <el-table
                ref="multipleTable"
                :data="tableData"
                row-key="id"
                show-summary
                border
                stripe
                height="600"
                row-class-name="tableRow"
                header-row-class-name="tableHeader"
                style="width: 100%; border-top: 1px solid #c5c5c5"
        >
            <!--            <el-table-column type="selection" class-name="noDrag" width="55"> </el-table-column>-->
            <!-- <el-table-column type="index" label="序号" width="55"> </el-table-column> -->
            <el-table-column
                    v-for="(item, index) in dropCol"
                    :key="`col_${index}`"
                    :prop="dropCol[index].propName"
                    :label="item.title"
                    class-name="allowDrag"
                    align="center"
                    fit
            >
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template>
                    <el-button
                            type="text"
                            icon="el-icon-edit"
                    >编辑</el-button>
                    <el-button type="text" icon="el-icon-delete" class="red"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import sortableJs from '../components/common/Sortable';

    export default {
        name: 'test',
        components: {
            sortableJs
        },
        data() {
            return {
               
                dropCol: [
                    { id: '1', title: '序号', propName: 'id' },
                    { id: '2', title: '时间', propName: 'date' },
                    { id: '3', title: '地址', propName: 'province' },
                    { id: '4', title: '星标', propName: 'city' },
                    { id: '5', title: '主题', propName: 'address' }
                ],
                tableData: [
                    { id: '1', date: '2016-05-02', province: '地址11', city: '合作中', address: 'A类' },
                    { id: '2', date: '2016-05-04', province: '地址002', city: '未合作', address: 'A类' },
                    { id: '3', date: '2016-05-01', province: '地址11003', city: '中断', address: 'A类' },
                    { id: '4', date: '2016-05-03', province: '地址104', city: '未合作', address: 'A类' },
                    { id: '5', date: '2016-05-04', province: '地址002', city: '未合作', address: 'A类' },
                    { id: '6', date: '2016-05-01', province: '地址11003', city: '中断', address: 'A类' },
                    { id: '7', date: '2016-05-03', province: '地址104', city: '未合作', address: 'A类' }
                ]
            };
        }
    };
</script>

<style scoped>
    .red {
        color: #ff0000;
    }
</style>